<template>
    <el-dialog title="扫码登录" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="20vh" :before-close="beforeClose" :close-on-click-modal="false">
        <div class="dialogVue">
            <div class="text_center" style="color: #111; font-weight: 600;">微信昵称：{{ wechatName }}</div>
            <div class="code margin30 flex_center align_center">
                <img :src="loginCode" style="width: 100%; height: 100%;" v-if="loginCode">
                <span class="el-icon-loading" v-else></span>
            </div>

            <div class="h8 text_center" style="margin-top: -20px;">扫码成功后，会同步通讯录，请勿关闭弹窗</div>

            <template v-if="show1">
                <div class="flex_center align_center margin20">
                    <span class="el-icon-warning" style="color: #d81e06; font-size: 18px;"></span>
                    <span style="color: #AAA; padding-left: 5px;">扫码页面停留时间过长，{{count1}} 秒后将自动关闭窗口</span>
                </div>
                <div class="btn margin20" @click="cancelTimer1">取消关闭</div>
            </template>

            <!-- <template v-if="show2">
                <div class="flex_center align_center margin20">
                    <span class="el-icon-warning" style="color: #d81e06; font-size: 18px;"></span>
                    <span style="color: #AAA; padding-left: 5px;">二维码 {{count2}} 秒后即将刷新</span>
                </div>
            </template> -->
        </div>
    </el-dialog>
</template>


<script>
import { toast } from '@/common/tools'
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        },
    },
    data(){
        return {
            loginCode: "",
            wechatName: "",
            id: "",

            // 若用户打开二维码弹窗 20 分钟后，将提示’扫码页面停留超时，10秒后将自动关闭窗口’点击‘取消关闭’，保留当前弹窗
            timer1: null,
            show1: false,
            count1: 1200,

            //前端每隔 5 分钟会向服务器获取二维码，获取前 10 秒内会倒计时提示：‘二维码 10 秒后即将刷新
            timer2: null,
            // show2: false,
            count2: 5,

            timer3: null,
            timer: null,

        }
    },
    methods: {
        cancelTimer1(){
            clearInterval(this.timer1)
            this.timer1 = null
            this.show1 = false
            this.count1 = 1200
        },
        cancelTimer2(){
            clearInterval(this.timer2)
            this.timer2 = null
            this.show2 = false
            this.count2 = 5
        },

        cancelTimer3(){
            clearInterval(this.timer3)
            this.timer3 = null
        },

        // 若用户打开二维码弹窗 20 分钟后，将提示’扫码页面停留超时，10秒后将自动关闭窗口’点击‘取消关闭’，保留当前弹窗
        setInterval1(){
            this.timer1 = setInterval(() => {
                this.count1 -= 1
                console.log(this.count1)
                if(this.count1===10) this.show1 = true
                if(this.count1===0) this.beforeClose()
            }, 1000);
        },

        // 前端每隔 5 分钟会向服务器获取二维码
        setInterval2(){
            if(this.timer2) this.cancelTimer2()
            this.timer2 = setInterval(() => {
                this.count2 -= 1
                console.log(this.count2)
                // if(this.count2===10 && !this.show1) {
                //     this.show2 = true
                // }
                // if(this.count2===10 && this.show1){
                //     console.log("刷新提示和长时间提示同时出现, 不显示刷新提示")
                // }
                if(this.count2===0) {
                    // this.loading = true
                    // this.loginCode = ""
                    this.$post("/front/userWechat/getQrcode", {
                        id: this.id
                    }).then(res=>{
                        if(res.data.code===0) {
                            this.loginCode = "data:image/png;base64," + res.data.obj
                            // this.loading = false
                            this.setInterval2()
                        }else{
                            if(res.data.code===-1) {
                                setTimeout(() => {
                                    this.getLoginCode()
                                }, 2000);
                            }  
                        }
                    })
                }
            }, 1000);
        },

        setInterval3(){
            this.timer3 = setInterval(()=>{
                this.getStatus()
            }, 3000)
        },

        // 登录
        reLogin(){
            console.log("scanId-reLogin", this.$store.state.scanId)
            this.loginCode = ""
            this.$post("/front/userWechat/reLogin", {
                bindWeChatId: this.$store.state.scanId
            }).then(res=>{
                if(res.data.code===0) {
                    this.id = res.data.obj.id
                    this.wechatName = res.data.obj.wechatName
                    this.getLoginCode()
                }else{
                    toast(1, res.data.msg) 
                }                  
            })
        },

        // 获取登录二维码
        getLoginCode(){
            this.loading = true
            this.$post("/front/userWechat/getQrcode", {
                id: this.id
            }).then(res=>{
                if(res.data.code===0) {
                    this.loginCode = "data:image/png;base64," + res.data.obj
                    this.loading = false
                    this.setInterval1()
                    this.setInterval2()
                    this.setInterval3()
                }else{
                    if(res.data.code===-1 && res.data.msg==="请稍候再试") {
                        this.timer = setTimeout(() => {
                            this.getLoginCode()
                        }, 2000);
                    }  
                }
            })
        },

        // 获取登录状态
        getStatus(){
            if(!this.dialogTableVisible){
                if(this.timer1) this.cancelTimer1()
                if(this.timer2) this.cancelTimer2() 
                if(this.timer3) this.cancelTimer3()
                return
            }
            this.$post("front/userWechat/wechatDetail", {
                id: this.id
            }).then(res=>{
                if(res.data.code===0) {
                    let status = res.data.obj.status
                    if(status===1) {
                        this.$store.dispatch("getWeChatList")
                        this.cancelTimer3()
                        this.$store.state.port = res.data.obj.wechatName
                        this.$emit("callback")
                        this.$store.state.currentWeChat = {
                            currentWeChatId: res.data.obj.id,
                            currentUserWechatName: res.data.obj.wechatName,
                            currentOnLineStatus: res.data.obj.status
                        }
                        window.sessionStorage.setItem("currentWeChatId", res.data.obj.id)
                        window.sessionStorage.setItem("currentUserWechatName", res.data.obj.wechatName)
                        window.sessionStorage.setItem("currentOnLineStatus", res.data.obj.status)
                        this.beforeClose()
                        this.$store.state.scanId = res.data.obj.id
                        console.log("scanId-scan", this.$store.state.scanId)
                    }
                }else{
                    toast(1, res.data.msg)
                }
            })
        },

        beforeClose(){
            if(this.timer1) this.cancelTimer1()
            if(this.timer2) this.cancelTimer2()
            if(this.timer3) this.cancelTimer3()
            if(this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
            this.loginCode = ""
            this.count2 = 5
            this.count1 = 1200
            this.$emit("beforeClose")
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    width: 400px !important;
    border-radius: 10px;
    box-sizing: border-box
}
:deep(.el-dialog__body) {
    padding: 0 20px 30px !important;
}
.dialogVue {
    width: 100%;
    border-radius: 5px;
    .h8 {
        padding-top: 30px;
        color: #606266;
    }
    .code {
        width: 200px;
        height: 200px;
        background: #f5f5f5;
        border-radius: 4px;
        span {
            font-size: 28px;
        }
    }
    .btn {
        width: 200px;
        height: 38px;
        border-radius: 6px;
        line-height: 38px;
        text-align: center;
        color: #fff;
        text-align: center;
        background: #0147fd;
        cursor: pointer;
    }
}
</style>